<template>
	<div id="dealWater">
		<div class="search">
			<el-select v-model="type" placeholder="请选择">
				<el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				>
				</el-option>
			</el-select>

			<input type="text" v-model="search" />
			<a href="javascript:;" @click="searchClaims">搜索</a>
		</div>

		<el-menu
			:default-active="activeIndex"
			class="el-menu-demo"
			mode="horizontal"
		>
			<el-menu-item index="1" @click="getClaims"
				>全部审核订单</el-menu-item
			>
			<el-menu-item index="2" @click="getClaimsNotAudio"
				>未审核</el-menu-item
			>
			<el-menu-item index="3" @click="getClaimsPass"
				>审核成功</el-menu-item
			>
			<el-menu-item index="4" @click="getClaimsNotPass"
				>审核失败</el-menu-item
			>
		</el-menu>

		<template>
			<el-table :data="claimsData" border style="width: 100%">
				<el-table-column prop="_id" label="编号" width="200">
				</el-table-column>
				<el-table-column prop="ordersId" label="所属订单">
				</el-table-column>
				<el-table-column prop="applyTime" label="申请理赔时间">
				</el-table-column>
				<el-table-column prop="accidentTime" label="事故时间">
				</el-table-column>
				<el-table-column fixed="right" label="状态" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.state == 1">未审核</span>
						<span v-if="scope.row.state == 2">审核成功</span>
						<span v-if="scope.row.state == 3">审核未通过</span>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="审核" width="100">
					<template slot-scope="scope">
						<el-button
							v-if="scope.row.state == 1"
							type="text"
							size="small"
							@click="claimsAudioEnter(scope.row._id)"
							>审核</el-button
						>
						<el-button v-else type="text" size="small" disabled
							>已审核</el-button
						>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button
							type="text"
							size="small"
							:plain="true"
							@click="deleteClaims(scope.row._id)"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<div class="block">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageData.currentPage"
				:page-sizes="[5, 10, 15]"
				:page-size="pageData.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageData.total"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script>
import apis from "../../http/apis";

export default {
	mounted() {
		this.getClaims();
	},
	data() {
		return {
			claimsData: [],
			pageData: {
				currentPage: 1,
				pageSize: 5,
				total: 0,
				state: 1, //1 所有 2 成功 3失败 4待审核
			},
			search: "",
			activeIndex: "1",
			options: [
				{
					value: "_id",
					label: "编号",
				},
				{
					value: "ordersId",
					label: "所属订单",
				},
			],
			type: "",
		};
	},
	methods: {
		//获取所有审核订单
		async getClaims() {
			const { data } = await apis.claims.getClaims({
				currentPage: this.pageData.currentPage,
				pageSize: this.pageData.pageSize,
			});
			if (data) {
				this.claimsData = data.data.claims;
				this.pageData.total = data.data.total;
				this.pageData.state = 1;
			}
		},
		//获取未审核订单
		async getClaimsNotAudio() {
			const { data } = await apis.claims.getClaimsByState({
				currentPage: this.pageData.currentPage,
				pageSize: this.pageData.pageSize,
				state: 1,
			});
			if (data) {
				this.claimsData = data.data.claims;
				this.pageData.total = data.data.total;
				this.pageData.state = 4;
			}
		},
		//获取所有审核成功订单
		async getClaimsPass() {
			const { data } = await apis.claims.getClaimsByState({
				currentPage: this.pageData.currentPage,
				pageSize: this.pageData.pageSize,
				state: 2,
			});
			if (data) {
				this.claimsData = data.data.claims;
				this.pageData.total = data.data.total;
				this.pageData.state = 2;
			}
		},
		//获取所有审核失败订单
		async getClaimsNotPass() {
			const { data } = await apis.claims.getClaimsByState({
				currentPage: this.pageData.currentPage,
				pageSize: this.pageData.pageSize,
				state: 3,
			});
			if (data) {
				this.claimsData = data.data.claims;
				this.pageData.total = data.data.total;
				this.pageData.state = 3;
			}
		},
		// 新增订单
		async addClaims() {
			const data = await apis.claims.addClaims({
				applyTime: "1",
				images: "1",
				status: 1,
			});
			console.log(data);
		},
		//删除理赔订单
		async deleteClaims(id) {
			console.log(id);
			const { data } = await apis.claims.deleteClaims({ _id: id });
			if (data.code) {
				if (this.pageData.state == 1) {
					this.getClaims();
				} else if (this.pageData.state == 2) {
					this.getClaimsPass();
				} else if (this.pageData.state == 3) {
					this.getClaimsNotPass();
				} else {
					this.getClaimsNotAudio();
				}
				this.$message({
					showClose: true,
					message: "删除成功",
					type: "success",
				});
			}
		},
		//搜索订单
		async searchClaims() {
			const { data } = await apis.claims.searchClaims({
				type: this.type,
				search: this.search,
				currentPage: this.pageData.currentPage,
				pageSize: this.pageData.pageSize,
			});
			console.log(data);
			// if (data) {
			// 	this.claimsData = data.data.claims;
			// 	this.pageData.total = data.data.total;
			// 	this.pageData.state = 1;
			// }
		},
		handleSizeChange(val) {
			this.pageData.pageSize = val;
		},
		handleCurrentChange(val) {
			this.pageData.currentPage = val;
		},
		//根据id获取审核订单
		async getClaimsById(id) {
			const data = await apis.claims.getClaimsById({ _id: id });
			return data;
		},
		//审核订单页面进入
		async claimsAudioEnter(id) {
			const { data } = await this.getClaimsById(id);
			if (data.code) {
				this.$router.push(
					`/adminsSystem/claimsAudio/${data.data[0]._id}`
				);
			}
		},
	},
	watch: {
		pageData: {
			handler() {
				if (this.pageData.state == 1) {
					this.getClaims();
				} else if (this.pageData.state == 2) {
					this.getClaimsPass();
				} else if (this.pageData.state == 3) {
					this.getClaimsNotPass();
				} else {
					this.getClaimsNotAudio();
				}
			},
			deep: true,
		},
		claims() {
			this.getClaims();
		},
	},
};
</script>

<style lang="scss">
#dealWater {
	.search {
		// width: 400px;
		display: flex;
		align-content: center;
		height: 40px;
		line-height: 40px;
		margin-bottom: 20px;
		border: 1px solid #ccc;
		background-color: #9ccaca;
		.el-select {
			margin: 0 10px;
		}
		input {
			height: 30px;
			width: 200px;
			margin-top: 5px;
			outline: none;
			border: none;
			border-radius: 5px;
		}
		a {
			width: 80px;
			height: 28px;
			margin-top: 5px;
			border: 1px solid #fff;
			overflow: hidden;
			margin-left: 5px;
			border-radius: 15px;
			line-height: 28px;
			border-radius: 2px;
			background-color: #9ccaca;
			font-size: 14px;
			color: #fff;
			text-decoration: none;
		}
	}
	table {
		// border-collapse: collapse;
		// border: 1px solid #ccc;
		// border-bottom: none;
		font-size: 12px;
		th {
			text-align: center;
			// border: 1px solid #ccc;
			border-bottom: none;
			padding: 8px 0;
		}
		td {
			// border: 1px solid #ccc;
			text-align: center;
			padding: 4px 0;
		}
	}
	.block {
		margin-top: 10px;
		margin-left: 230px;
	}
}
</style>
